<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Hello WebSocket</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--    <script src="${contextPath}/static/js/3.js"></script>-->
    <!--    <script src="@{js/3.js}"></script>-->
    <script src="../static/js/3.js"></script>
</head>
<body>
<div id="main-content" class="container" style="margin-top: 10px;">
    <div class="row" id="row1">
        <form class="navbar-form" style="margin-left: 0">
            <div class="col-md-12">
                <div class="form-group">
                    <label>WebSocket 连接:</label>
                    <button id="id_connect" class="btn btn-primary" type="button" onclick="connect();">连接</button>
                    <button id="id_disconnect" class="btn btn-danger" type="button" disabled="disabled"
                            onclick="disconnect();">断开
                    </button>
                </div>
                <div class="form-group">
                    <label for="name">姓名(token):</label>
                    <input class="form-control" type="text" id="name" placeholder="姓名(token)">
                    <label for="subscribe">订阅:</label>
                    <label for="select_topics1"></label>
                    <select class="form-control" id="select_topics1">
                        <option>/topic</option>
                        <option>/user/queue</option>
                    </select>
                    <input class="form-control" type="text" id="subscribe" placeholder="以/开始">
                </div>
                <button class="btn btn-warning" onclick="subscribeSocket();" type="button">订阅</button>
            </div>
        </form>
    </div>
    <br/>
    <div class="row" id="row2" style="display: none;">
        <form class="navbar-form" style="margin-left: 0">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="toName">发送给姓名(token):</label>
                    <input class="form-control" type="text" id="toName" placeholder="广播时为空">
                    <label for="topic">订阅地址:</label>
                    <label for="select_topics2"></label>
                    <select class="form-control" id="select_topics2">
                        <option>/topic</option>
                        <option>/queue</option>
                    </select>
                    <input class="form-control" type="text" id="topic" placeholder="以/开始,广播前缀topic,点对点queue">
                </div>
                <br/> <br/>
            </div>
        </form>
        <div class="form-group">
            <label for="content">发送的消息内容:</label>
            <input class="form-control" type="text" id="content" placeholder="消息内容">
        </div>
        <button class="btn btn-info" type="button" onclick="sendMessage();">发送</button>
    </div>
    <div class="row" id="row3">
        <div class="col-md-12">
            <h5 class="page-header" style="font-weight:bold">历史消息:</h5>
            <table class="table table-striped">
                <tbody id="information"></tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>